<template>
  <div class="page">
    <div class="enterpriseInfoTab">
      <ul>
        <li>
          <a
            @click="
              enterpriseInfoRouter('/dlyrl/hr/leaveprocess/LeaveProcessList')
            "
          >
            请假流程
          </a>
        </li>
        <li>
          <a
            @click="
              enterpriseInfoRouter(
                '/dlyrl/hr/outsideprocess/OutsideProcessList'
              )
            "
          >
            外出流程
          </a>
        </li>
        <li class="defaultActive">
          <a
            @click="
              enterpriseInfoRouter(
                '/dlyrl/hr/overtimeprocess/OvertimeProcessList'
              )
            "
          >
            加班流程
          </a>
        </li>
        <li>
          <a
            @click="
              enterpriseInfoRouter(
                '/dlyrl/hr/reimburseprocess/ReimburseProcessList'
              )
            "
          >
            报销流程
          </a>
        </li>
        <li>
          <a
            @click="
              enterpriseInfoRouter('/dlyrl/hr/travelprocess/TravelProcessList')
            "
          >
            出差流程
          </a>
        </li>
      </ul>
    </div>
    <!-- <el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
            搜索框
          <el-form-item style="float: right">
            <el-button type="primary" @click="refreshList()" size="small">查询</el-button>
            <el-button @click="resetSearch()" size="small">重置</el-button>
          </el-form-item>
      </el-form> -->
    <!-- 导入导出-->
    <el-dialog title="导入Excel" :visible.sync="isImportCollapse">
      <el-form
        size="small"
        :inline="true"
        v-show="isImportCollapse"
        ref="importForm"
      >
        <el-form-item>
          <el-button type="default" @click="downloadTpl()" size="small"
            >下载模板</el-button
          >
        </el-form-item>
        <el-form-item prop="loginName">
          <el-upload
            class="upload-demo"
            :action="`${this.$http.BASE_URL}/dlyrl/hr/overtimeprocess/overtimeProcess/import`"
            :on-success="uploadSuccess"
            :show-file-list="true"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只允许导入“xls”或“xlsx”格式文件！
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="bg-white top">
      <el-row>
        <el-button
          v-if="hasPermission('dlyrl:hr:overtimeprocess:overtimeProcess:add')"
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="add()"
          >新建</el-button
        >
        <el-button
          v-if="hasPermission('dlyrl:hr:overtimeprocess:overtimeProcess:edit')"
          type="warning"
          size="small"
          icon="el-icon-edit-outline"
          @click="edit()"
          :disabled="dataListSelections.length != 1"
          plain
          >修改</el-button
        >
        <el-button
          v-if="hasPermission('dlyrl:hr:overtimeprocess:overtimeProcess:del')"
          type="danger"
          size="small"
          icon="el-icon-delete"
          @click="del()"
          :disabled="dataListSelections.length <= 0"
          plain
          >删除
        </el-button>
        <el-button-group class="pull-right">
          <el-button
            v-if="
              hasPermission('dlyrl:hr:overtimeprocess:overtimeProcess:import')
            "
            type="default"
            size="small"
            icon="el-icon-upload2"
            title="导入"
            @click="isImportCollapse = !isImportCollapse"
          ></el-button>
          <el-button
            v-if="
              hasPermission('dlyrl:hr:overtimeprocess:overtimeProcess:export')
            "
            type="default"
            size="small"
            icon="el-icon-download"
            title="导出"
            @click="exportExcel()"
          ></el-button>
          <el-button
            type="default"
            size="small"
            icon="el-icon-refresh"
            @click="refreshList"
          >
          </el-button>
        </el-button-group>
      </el-row>
      <el-table
        :cell-style="cellStyle"
        style="border: 1px solid #d6cfe2"
        :header-cell-class-name="cellHeadStyle"
        :row-class-name="tableRowClassName"
        :data="dataList"
        size="small"
        height="calc(100% - 80px)"
        @selection-change="selectionChangeHandle"
        @sort-change="sortChangeHandle"
        v-loading="loading"
        class="table"
      >
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50"
        >
        </el-table-column>
        <el-table-column
          prop="userInfo.realName"
          show-overflow-tooltip 
          fixed="left"
          width="130px"
          label="用户名称"
        >
          <!-- <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              v-if="
                hasPermission('dlyrl:hr:overtimeprocess:overtimeProcess:edit')
              "
              @click="edit(scope.row.id)"
              >{{ scope.row.userInfo.realName }}</el-link
            >
            <el-link
              type="primary"
              :underline="false"
              v-else-if="
                hasPermission('dlyrl:hr:overtimeprocess:overtimeProcess:view')
              "
              @click="view(scope.row.id)"
              >{{ scope.row.userInfo.realName }}</el-link
            >
            <span v-else>{{ scope.row.userInfo.realName }}</span>
          </template> -->
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="view(scope.row.id)"
              >{{ scope.row.userInfo.realName }}</el-link
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="enterpriseInfo.companyName"
          show-overflow-tooltip 
          width="130px"
          label="企业名称"
        >
        </el-table-column>
        <el-table-column
          prop="department.name"
          show-overflow-tooltip 
          width="130px"
          label="所属部门"
        >
        </el-table-column>
        <el-table-column
          prop="processInfo.processName"
          show-overflow-tooltip 
          width="130px"
          label="流程名称"
        >
        </el-table-column>
        <el-table-column
          prop="beginTime"
          show-overflow-tooltip 
          width="130px"
          label="开始时间"
        >
        </el-table-column>
        <el-table-column
          prop="endTime"
          show-overflow-tooltip 
          width="130px"
          label="结束时间"
        >
        </el-table-column>
        <el-table-column
          prop="length"
          show-overflow-tooltip 
          label="时长"
        >
        </el-table-column>
        <el-table-column
          prop="overtimeReason"
          show-overflow-tooltip 
          width="130px"
          label="加班事由"
        >
        </el-table-column>
        <el-table-column
          prop="nowProcessNum"
          show-overflow-tooltip 
          width="130px"
          label="流程序号"
        >
        </el-table-column>
        <el-table-column
          prop="nowApprovalStatus"
          show-overflow-tooltip 
          width="130px"
          label="审批状态"
        >
          <!-- (0:待审核 1:通过 2:驳回 auditstatus) -->
          <template slot-scope="scope">
            {{
              $dictUtils.getDictLabel(
                "auditstatus",
                scope.row.nowApprovalStatus,
                "-"
              )
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="nowApprovalRole.roleName"
          show-overflow-tooltip 
          width="130px"
          label="审批角色"
        >
        </el-table-column>
        <el-table-column
          prop="nowApprovalUser.userName"
          show-overflow-tooltip 
          width="130px"
          label="审批用户"
        >
        </el-table-column>
        <el-table-column
          prop="nowApprovalTime"
          show-overflow-tooltip 
          width="130px"
          label="审批时间"
        >
        </el-table-column>
        <el-table-column
          prop="nextProcessNum"
          show-overflow-tooltip 
          width="140px"
          label="下一步流程序号"
        >
        </el-table-column>
        <el-table-column
          prop="nextApprovalRole.roleName"
          show-overflow-tooltip 
          width="140px"
          label="下一个审批角色"
        >
        </el-table-column>
        <el-table-column
          prop="nextApprovalUser.userName"
          show-overflow-tooltip 
          width="130px"
          label="抄送用户"
        >
        </el-table-column>
        <el-table-column
          prop="noReason"
          show-overflow-tooltip 
          width="130px"
          label="驳回原因"
        >
        </el-table-column>
        <el-table-column
          prop="remarks"
          show-overflow-tooltip 
          width="130px"
          label="备注信息"
        >
        </el-table-column>
        <!-- <el-table-column
          header-align="center"
          align="center"
          fixed="right"
          :key="Math.random()"
          width="100"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              v-if="
                hasPermission('dlyrl:hr:overtimeprocess:overtimeProcess:view')
              "
              type="text"
              icon="el-icon-view"
              size="mini"
              @click="view(scope.row.id)"
              >查看</el-button
            >
            <el-button v-if="hasPermission('dlyrl:hr:overtimeprocess:overtimeProcess:edit')" type="text" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)">修改</el-button>
            <el-button v-if="hasPermission('dlyrl:hr:overtimeprocess:overtimeProcess:del')" type="text"  icon="el-icon-delete" size="mini" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <OvertimeProcessForm
      ref="overtimeProcessForm"
      @refreshDataList="refreshList"
    ></OvertimeProcessForm>
  </div>
</template>

<script>
import tableStyles from "../../../../../utils/mixins.js";
import OvertimeProcessForm from "./OvertimeProcessForm";
export default {
  mixins: [tableStyles],
  data() {
    return {
      searchForm: {},
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      orderBy: "",
      dataListSelections: [],
      isImportCollapse: false,
      loading: false,
    };
  },
  components: {
    OvertimeProcessForm,
  },
  activated() {
    this.refreshList();
  },
  methods: {
    //跳转
    enterpriseInfoRouter(url) {
      this.$router.push(url);
    },
    // 获取数据列表
    refreshList() {
      this.loading = true;
      this.$http({
        url: "/dlyrl/hr/overtimeprocess/overtimeProcess/list",
        method: "get",
        params: {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          orderBy: this.orderBy,
          ...this.searchForm,
        },
      }).then(({ data }) => {
        if (data && data.success) {
          this.dataList = data.page.list;
          this.total = data.page.count;
          this.loading = false;
        }
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.refreshList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val;
      this.refreshList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },

    // 排序
    sortChangeHandle(obj) {
      if (obj.order === "ascending") {
        this.orderBy = obj.prop + " asc";
      } else if (obj.order === "descending") {
        this.orderBy = obj.prop + " desc";
      } else {
        this.orderBy = "";
      }
      this.refreshList();
    },
    // 新增
    add() {
      this.$refs.overtimeProcessForm.init("add", "");
    },
    // 修改
    edit(id) {
      id =
        id ||
        this.dataListSelections.map((item) => {
          return item.id;
        })[0];
      this.$refs.overtimeProcessForm.init("edit", id);
    },
    // 查看
    view(id) {
      this.$refs.overtimeProcessForm.init("view", id);
    },
    // 删除
    del(id) {
      let ids =
        id ||
        this.dataListSelections
          .map((item) => {
            return item.id;
          })
          .join(",");
      this.$confirm(`确定删除所选项吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.loading = true;
        this.$http({
          url: "/dlyrl/hr/overtimeprocess/overtimeProcess/delete",
          method: "delete",
          params: { ids: ids },
        }).then(({ data }) => {
          if (data && data.success) {
            this.$message.success(data.msg);
            this.refreshList();
          }
          this.loading = false;
        });
      });
    },
    // 导入成功
    uploadSuccess(res, file) {
      if (res.success) {
        this.$message.success({
          dangerouslyUseHTMLString: true,
          message: res.msg,
        });
      } else {
        this.$message.error(res.msg);
      }
    },
    // 下载模板
    downloadTpl() {
      this.$utils.download(
        "/dlyrl/hr/overtimeprocess/overtimeProcess/import/template"
      );
    },
    exportExcel() {
      let params = {
        ...this.searchForm,
      };
      this.$utils.download(
        "/dlyrl/hr/overtimeprocess/overtimeProcess/export",
        params
      );
    },
    resetSearch() {
      this.$refs.searchForm.resetFields();
      this.refreshList();
    },
  },
};
</script>
<style scoped>
ul {
  margin: 0;
}
</style>